<template>
	<view style="background-color:#000;">
		<!-- <view class="status_bar"></view> -->
		<fui-drawer :show="leftPage" direction="left" :maskClosable="true" @close="closeDrawer">
			<view style="width:600rpx;height:100vh;background-color:#000;" @click="closeDrawer"></view>
		</fui-drawer>
		<fui-drawer :show="rightPage" direction="right" :maskClosable="true" @close="closeDrawer">
			<view style="width:600rpx;height:100vh;background-color:#000;" @click="closeDrawer"></view>
		</fui-drawer>

		<view class="indexbody" :style="[{transform:leftPage?'translateX(300rpx)':'translateX(0rpx)'}]">
			<view class="indextabs">
				<fui-icon name="operate" size="50" color="#FFF" style="width:30rpx;margin-top:22rpx"
					@click="showDrawer('left')" />
				<fui-tabs :tabs="tabs" @change="modifyTabs" :current="tabIndex" selectedColor="#FFF" :short="false"
					background="none" />
				<!-- <fui-icon name="search" size="40" color="#FFF" style="margin-right:10rpx;margin-top:25rpx" @click="showDrawer('right')" /> -->
				<view style="width:200rpx"></view>
			</view>
			<!-- 外层的横线滚动 -->
			<swiper :current="tabIndex" :duration="300" @change="tabChange" class="swiper">
				<swiper-item class="fui-swiper__item">
					<!-- 推荐滚动列表组件 -->
					<view style="border-radius:10rpx;">
						<ContentList @loadList="loadList" ref="ContentListRef" :list="indexPics"></ContentList>
					</view>
				</swiper-item>
				<swiper-item class="fui-swiper__item">
					<view style="color:#FFF"></view>
				</swiper-item>
				<swiper-item class="fui-swiper__item">
					<view style="color:#FFF"></view>
				</swiper-item>
				<swiper-item class="fui-swiper__item">
					<view style="color:#FFF"></view>
				</swiper-item>
				<swiper-item class="fui-swiper__item">
					<view style="color:#FFF"></view>
				</swiper-item>
				<swiper-item class="fui-swiper__item">
					<view style="color:#FFF"></view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
	import ContentList from '@/indexPages/components/Contentlist.vue'
	export default {
		components: {
			ContentList,
		},
		data() {
			return {
				page: 1,
				ContentListRef: null,
				verticalIndex: 0,
				opacity: false,
				tabs: [
					'推荐', '关注', '同城', '动态'
				],
				tabIndex: 0,
				height: 200,
				title: 'Hello',
				leftPage: false,
				rightPage: false,
				indexPics: []
			}
		},
		onTabItemTap(e) {
			/*tab切换时更新统计*/
			console.log('cardtab', e);
			this.$refs.ContentListRef.videoPlayChange()
		},
		onHide() {
			this.$refs.ContentListRef.stopOtherVideo()
			console.log('走这里了吗？');
		},
		onLoad() {
			this.page == 1
			this.getList()
			// const abc = 'a=1&b=2'
			// const xyz = encodeURIComponent(abc)
			// const scene = decodeURIComponent(xyz)
			// console.log(scene)

			// var sceneObj = {};
			// for (var i = 0; i < scene.split('&').length;i++){
			//   var arr = scene.split('&')[i].split('=');
			//   sceneObj[arr[0]] = arr[1];
			// }
			// console.log(sceneObj)
		},
		onShow() {
			// uni.setTabBarStyle({
			// 	backgroundColor: '#000', // 需要设置的背景颜色值
			// 	success: function() {
			// 		console.log('TabBar backgroundColor changed successfully');
			// 	},
			// 	fail: function(err) {
			// 		console.error('Failed to change TabBar backgroundColor:', err);
			// 	}
			// });
		},
		methods: {
			async loadList() {
				this.page++
				await this.getList()
			},
			getList() {
				if (this.page == 1) {
					this.indexPics = []
				}
				this.$httpost('/Home/HomeTopList', {
					'page': this.page
				}).then(res => {
					console.log('首页列表：', res);
					if (res.code == 200) {
						this.indexPics = this.indexPics.concat(res.data)
					}
				})
			},
			// 子组件切换tab
			changeTab() {
				this.tabIndex += 1
			},

			modifyTabs(e) {
				this.switchTab(e.index);
			},
			tabChange(e) {
				if (e.detail.source == 'touch') {
					let index = e.target.current || e.detail.current;
					this.switchTab(index);
				}
			},
			switchTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
				// 切换tab的时候 暂停或开启视频播放
				if (index == 0) {
					this.$refs.ContentListRef.videoPlayChange()
				} else {
					this.$refs.ContentListRef.stopOtherVideo()
				}
			},
			showDrawer(type) {
				if (type == 'left') this.leftPage = true
				if (type == 'right') this.rightPage = true
			},
			closeDrawer() {
				this.leftPage = false
				this.rightPage = false
			},

		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);  
		width: 100%;  
		background-color: #F8F8F8;  
	}
	view {
		box-sizing: border-box;
	}

	.indextabs {
		position: fixed;
		z-index: 1000;
		width: 100vw;
		display: flex;
		margin-top: 70rpx;
	}

	.indexbody {
		background-color: #000;
		height: calc(100vh);
		transition: transform 0.5s;
		// padding-top: 10rpx;
		border-radius: 10rpx;
	}

	.fui-swiper__item {}


	.swiper {
		width: 100vw;
		height: calc(100vh);
		position: relative;
	}
</style>